<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>费用列表</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row" style="background-color: white; height: 60px; padding: 13px; border: none; border-radius: 8px;">
        <div class="col-md-12">
            <input type="text" v-model="numbers" placeholder="房间号" class="form-control" style="width: 200px;float: left"/>
            <lab style="float: left;height: 30px;line-height: 30px;margin-left: 20px;margin-right: 10px">缴费状态:</lab>
            <select class="form-control" v-model="prostatus" style="width: 200px;float: left">
                <option value=null>请选择</option>
                <option value="0">已缴费</option>
                <option value="1">未缴费</option>
            </select>
            <button style="margin-left: 30px;width: 80px;float: left" @click="doQuert" class="btn btn-primary">查询</button>
            <button style="margin-left: 30px;width: 80px;float: left" @click="reset" class="btn btn-primary">重置</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>物业收费列表</caption>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>房间号</th>
                    <th>房东</th>
                    <th>费用类型</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="p in proInfoList">
                    <td>{{p.id}}</td>
                    <td>{{p.numbers}}</td>
                    <td>{{p.username}}</td>
                    <td>{{p.name}}</td>
                    <td>{{p.startDate}}</td>
                    <td>{{p.endDate}}</td>
                    <td>{{p.money}}</td>
                    <td>
                        <span v-if="p.status==0" style="background-color: #029688;padding: 5px 5px 5px 5px ;border-radius: 3px">已缴费</span>
                        <span v-if="p.status==1" style="background-color: #ff5722;padding: 5px 5px 5px 5px ;border-radius: 3px">未缴费</span>
                    <td>
                        <button class="btn btn-primary" @click="doUpdate(p.id)">修改</button>
                        <button class="btn btn-danger" @click="doDelete(p.id)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li class="active" v-if="p==pageIndex"><a @click="goTo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="goTo(p)">{{p}}</a></li>

            </ul>
        </div>
    </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            prostatus:null,
            numbers:null,
            //用于分页
            pageTotal:0,
            pageIndex:1,
            pageSize:8,
            pageNum:0,
            //用于显示列表
            proInfoList:null

        },
        methods: {
            requestProInfoList(p){
                //请求物业缴费列表(直接用p跳不回去)
                this.pageIndex=p;
                var uid = localStorage.getItem("uid");
                var url='http://localhost:8080/proInfo/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize+'&numbers='+this.numbers+"&status="+this.prostatus+'&uid='+uid;
                axios.get(url).then(response => {
                        this.proInfoList=response.data.data;
                        this.pageTotal=response.data.pageTotal;
                        this.pageNum=Math.ceil(this.pageTotal/this.pageSize);
                });
            },
            reset(){
                this.numbers=null;
                this.prostatus=null;
                this.requestProInfoList(1);
            },
            goTo(p){
              this.pageIndex=p;
              this.requestProInfoList(this.pageIndex);
            },
            doAdd(){
                window.parent.main_right.location.href = "propertyInfo_add_update.html";
            },
            doUpdate(id){
                window.parent.main_right.location.href = "propertyInfo_add_update.html?id="+id;
            },
            doDelete(id){
                var uid = localStorage.getItem("uid");
                var url='http://localhost:8080/proInfo/remove?id='+id+'&uid='+uid;
                axios.get(url).then(response =>{
                    if (response.data.code == 200){
                        this.requestProInfoList(1);
                    }else{
                        alert(response.data.msg)
                    }
                });
            },
            doQuert(){
                this.requestProInfoList(this.pageIndex);
            }
        },
        created: function () {
            this.requestProInfoList(this.pageIndex);
        }
    });
</script>
</body>
</html>